<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mars激活</title>

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="validator"
	uri="http://www.springmodules.org/tags/commons-validator"%>
<core:set var="webcontext" scope="request"
	value="${pageContext.request.contextPath}" />
<core:set var="imagepath" scope="request" value="${webcontext}/images" />
<core:set var="csspath" scope="request" value="${webcontext}/css" />
<core:set var="jspath" scope="request" value="${webcontext}/javascript" />
<core:set var="jsppath" scope="request" value="${webcontext}/jsp" />
<core:set var="htmlpath" scope="request" value="${webcontext}/html" />
<core:set var="bootstrapPath" scope="request"
	value="${webcontext}/bootstrap" />
<core:set var="layerPath" scope="request" value="${webcontext}/layer" />
<!-- TODO the gdms url should replace by the token -->
<core:set var="gdmsurl" scope="request"
	value="@token-gdms.server.servlet.context.url.integration@" />
<script type="text/javascript">
	var contextPath = "${webcontext}";
</script>
<%@page import="com.cap.bts.framework.common.util.Pager"%>
<%@page import="com.cap.bts.framework.common.constant.CommonConstants"%>
<%@page import="com.cap.bts.framework.common.util.CodeTextUtils"%>
<%@page import="com.cap.bts.framework.common.util.CookieUtils"%>
<%@page import="com.cap.bts.framework.auth.constant.AuthConstant"%>


<link rel="stylesheet" type="text/css" href="${csspath }/public.css" />
<script type="text/javascript" src="${jspath }/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${layerPath}/layer.js"></script>

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	font-family: "Microsoft YaHei";
	color: #000;
}

body {
	min-width: 600px;
}

html, body {
	font: 12px "Microsoft YaHei", "Microsoft YaHei", Verdana, Arial,
		sans-serif;
	color: #000;
	overflow: auto;
}

.form-label {
	text-align: right;
	padding-right: 15px;
	width: 200px;
}

input {
	height: 25px;
	width: 130px;
}

.form-label {
	text-align: right;
	padding-right: 15px;
	width: 200px;
}
.content{
margin : 10px;
border: none;
width: 600px;
}
.error-msg{
color:red;
margin: 10px;
padding-left: 150px;
}
.cardNumber{text-align:right; width:80px; border: none; background-color: #E8E0E0;padding-right: 10px;}
</style>
<script type="text/javascript">
var msgContainer,saveBtn,showDetailBtn,url = '${webcontext}/MARS/toSaveMemberActivationListMars';

<core:if test="${fn:length(dto.cardList) == 0}">
url = '${webcontext}/MARS/toSaveMemberActivationMars';
</core:if>	
	
	$(function() {
		msgContainer = $("#msg");
		saveBtn = $("#saveAndSubmit");
		showDetailBtn = $("#showDetailBtn");
		saveBtn.click(function() {
			saveBtn.toggle();

			var errorFlag = false;
			
			<core:if test="${fn:length(dto.cardList) == 0}">
			var cardNumber = $.trim($("#cardNumber").val());
			if (cardNumber.length == 0) {
				msgContainer.html("请输入卡号！");
				saveBtn.toggle();
				return;
			}
			</core:if>
			var noInputFlag=true;
			 $("input.activeCode").each(function() {
				$(this).val($.trim($(this).val()));
				if ($(this).val().length == 0) {
				/* 	msgContainer.html("请输入验证码！");
					errorFlag = true; */
				}else{
					noInputFlag= false ;
				}
			}); 
			if (errorFlag) {
				saveBtn.toggle();
				return;
			}
			
			 if(noInputFlag){
				saveBtn.toggle();
				 msgContainer.html("请输入验证码！");
				 return;
			 }
			msgContainer.html("<img src='${imagepath}/loading2.gif' />数据保存中，请稍等...");

			$.ajax({
				url : url,
				type : 'post',
				dataType : 'json',
				data : $('form').serialize(),
				success : function(data) {
					if (data.result == true) {
						msgContainer.html("激活成功，请关闭当前窗口。");
					} else {
						saveBtn.toggle();
						msgContainer.html("操作失败：" + data.errorMsg);
					}
				},
				error : function(msg) {
					saveBtn.toggle();
					msgContainer.html("操作失败：" + msg);
				}
			})

		});

	});
	
	
	function showDetail(){
		msgContainer.html("");
		var cardNumber = $.trim($("#cardNumber").val());
		if(cardNumber.length == 0){
			msgContainer.html("请先输入卡号！");
			return;
		}
		msgContainer.html("正在请求数据...");
		showDetailBtn.toggle();
		
		$.ajax({
			url:'${webcontext}/MARS/isPackageNumberExist',
			type:'post',
			async : true,
			data:$('form').serialize(),
			success: function (data) {
				showDetailBtn.toggle();
				  if(!data.success){
					  msgContainer.html(data.error);
				  }else{
					//iframe层
						layer.open({
						    type: 2,
						    title: '详细信息',
						    shadeClose: false,
						    closeBtn: false,
						    shade: 0.1, 
						    offset : ['10px' , '25px'],
						    area: ['500px', '350px'],
						    content: "${webcontext}/MARS/toPurchaseDetailInfo?packageNumber="+ cardNumber +"&_d=" + new Date(),//iframe的url
						    end: function(){ 
						    	//关闭弹出层后回调方法
						    	msgContainer.html("");
						    }
						});  
				  }
	        },
	        error:function(){
	        	showDetailBtn.toggle();
	        }
		});
	}

</script>

</head>
<body>

	<div class="content">
		<form:form id="activate"
			action="#"
			method="post" modelAttribute="dto" enctype="multipart/form-data">
			<form:input type="hidden" path="memberId" name="id" />
			<form:input type="hidden" path="packageDefId" name="packageDefId" />
			<form:input type="hidden" path="onhandQuantity" />
			<form:input type="hidden" path="price" />
			<input type="hidden" id="marsCustomerId" name="marsCustomerId"
				value="${dto.marsCustomerId}" />
			<input type="hidden" id="marsCarId" name="marsCarId"
				value="${dto.marsCarId}" />
			<input type="hidden" id="dealerId" name="dealerId"
				value="${dto.dealerId}" />
			<input type="hidden" id="soNumberActive" name="soNumberActive"
				value="${dto.soNumber}" />
			<input type="hidden" id="operationType" name="operationType" />


			<form:hidden path="mobilePhone" />
			<form:hidden path="memberName" />
			<form:hidden id="carPlate" path="carPlate" />
			<div >
					<table class="input_tab">
						<tr>
							<th class="form-label" colspan="2" style="text-align:left; padding-left:110px;height:25px;">手机：${dto.mobilePhone}</th>
						</tr>
						<tr>
							<th class="form-label"colspan="2" style="text-align:left; padding-left:110px;height:25px;">姓名：${dto.memberName}</th>
						</tr>
						<tr>
							<th class="form-label"colspan="2" style="text-align:left; padding-left:110px;height:25px;">车牌：${dto.carPlate}</th>
						</tr>
						<tr>
							<th style="height: 25px;"> </th>
							<th class="form-label"></th>
						</tr>
						<tr>
							<th class="form-label" style="padding-right:${fn:length(dto.cardList) > 0 ? '45' : '80'}px;">卡号</th>
							<th class="form-label" style="text-align: left;padding-left:55px;">验证码</th>
						</tr>
						<tr>
							<th style="height: 10px;"> </th>
							<th class="form-label"></th>
						</tr>
						<core:forEach items="${dto.cardList}" var="list" varStatus="status">
							<tr>
								<td class="form-label">
									套餐名称
								</td>
								<td align="left">
								    ${list.packageName}
								</td>
							</tr>
							<tr>
								<td class="form-label">
									<input name="cardList[${status.index}].cardNumber" readonly="readonly" value="${list.cardNumber}" class="cardNumber" />
								</td>
								<td align="left">
									<input class="activeCode" name="cardList[${status.index}].activeCode" />
								</td>
							</tr>
						</core:forEach>
						<core:if test="${fn:length(dto.cardList) == 0}">
						<tr>
								<td class="form-label">
									<input name="packageNumber" value="" id="cardNumber"  />
									<button type="button" class="btn" style="width:40px; padding: 3px 6px;" id="showDetailBtn" onClick="showDetail()">详情</button>
								</td>
								<td align="left">
									<input class="activeCode" name="packageActiveCode" />
								</td>
							</tr>
						</core:if>
					</table>
					<div class="spliter h_10"></div>
					<div class="spliter h_5"></div>
			</div>
			<div class="error-msg" id="msg"></div>
			<div class="btn_div" style="text-align:center;">
				<button type="button" class="btn" style="width: 100px; margin-left: -150px;"
					id="saveAndSubmit" value="确认激活">&nbsp;激　活</button>
			</div>
		</form:form>
	</div>

</body>

</html>